<template>
	<div class="decorate-slideNav"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <div :class="['NavBox',(tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius )?'borderRadius':'']" :style="styleObj">
     <div class="hiddenBox">
        <ul class="nav-box" :style="styleObj2">
        <li  :class="['nav-item',...itemClassName]" v-for="(item, index) in navList" :key="index" :style="[styleObj1]">
          <a href="javascript:;" @click="openLink(item.link)">
            <p v-if="item.pic && tplItemData.layout1_style == 1" class="img-box" :style="styleObj3">
              <img :src="item.pic" alt="">
            </p>
            <p class="nav-title" :style="{color:item.titleColor,background:item.titleBackgroundColor}">{{item.showtitle}}</p>
            </a>
        </li>
      </ul>
     </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    data() {
      return {
        navList: [],
        styleObj: {},
        styleObj1: {},
        styleObj2: {},
        styleObj3: {},
        itemClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    },
    mounted() {
      // console.log(this.tplItemData, 1111111)
      this.navList = this.tplItemData.dataset
      // this.styleObj.padding = this.tplItemData.modulePadding + 'px 10px'
      this.styleObj.overflow = 'hidden'
      this.styleObj1.fontSize = this.tplItemData.fontSize + 'px'
      if (this.tplItemData.dataset.length === 1) {
        this.styleObj3.height = '355px'
        this.itemClassName.push('col1')
      } else if (this.tplItemData.dataset.length === 2) {
        this.styleObj3.height = '168px'
        this.itemClassName.push('col2')
      } else if (this.tplItemData.dataset.length === 3) {
        this.styleObj3.height = '123px'
        this.itemClassName.push('col3')
      } else if (this.tplItemData.dataset.length === 4) {
        this.styleObj3.height = '90px'
        this.itemClassName.push('col4')
      } else {
        this.styleObj3.height = '84px'
        this.itemClassName.push('col5')
      }
      if (this.tplItemData.layout1_style == 2) {
        this.itemClassName.push('layout1_style2')
      }
    }
  })
</script>

<style lang='scss'>
.decorate-slideNav{
  .NavBox{
    background: #ffffff;
    box-sizing: border-box!important;
    overflow: hidden;
    width: 100%;
    overflow-y: auto;
        padding: 25px;
    &.borderRadius{
      border-radius: 20px;
      .nav-box{
        li{
          .img-box{
            border-radius: 12px;
            overflow: hidden;
          }
        }
      }
    }
    .hiddenBox::-webkit-scrollbar {
      display: none;
    }
    .hiddenBox{
      overflow: hidden;
      overflow-x: auto;
      overflow-x: scroll;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
       .nav-box{
          display: flex;
          li{
            width: 140px;
            text-align: center;
            flex-shrink: 0;
            white-space: nowrap;
            margin-right: 20px;
            a{
              display: block;
              width: 100%;
              text-align: center;
              margin-right: 10px;
              p{
                width: 100%;
              }
              .nav-title{
                box-sizing: border-box;
                padding: 2px 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            &.layout1_style2{
              width: 180px;
              margin-right: 0;
              border-right: 1px solid #ededed;
              &:last-child{
                border-right: 0;
              }
            }
          }
          .img-box {
            margin-bottom: 14px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .col1{
            width: 94vw;
          }
          .col2{
            width: 45vw;
          }
          .col3{
            width: 33vw;
          }
          .col4{
            width: 24vw;
          }
          .col5{
            width: 22.5vw;
          }
        }
    }
  }
}
</style>
